<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>我的购物车-小米商城</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <style>
        .banner_e_x {
            width: 1226px;
            height: 100px;
            display: block;
            margin-left: 9.6%;
        }

        .banner_e_x .wdgwc {
            height: 100px;
            line-height: 100px;
            font-weight: bold;
            font-size: 24px;
        }

        .banner_e_x .logo {
            background: url(../../image/logo_top.png) no-repeat center center;
            width: 50px;
            height: 100px;
        }

        .banner_e_x .wxts {
            height: 90px;
            line-height: 105px;
            font-size: 12px;
            color: #777;
        }

        .banner_e_x .dlzc ul li a {
            line-height: 100px;
            display: block;
            padding: 0 8px;
            font-size: 12px;
            font-family: Times New Roman;
            color: #777;
        }

        .banner_e_x .dlzc ul li {
            float: left;
            font-size: 12px;
            line-height: 100px
        }

        #add:hover {
            background-color: #e0e0e0 !important;
            cursor: pointer;
        }

        #sub:hover {
            background-color: #e0e0e0 !important;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!-- start header -->
<!--end header -->

<!-- start banner_x -->

<@common.cart_head/>

<div class="xiantiao"></div>
<div class="gwcxqbj">
<#--<input id="username" type="hidden" value="#{user}">-->
    <div id="tops" class="gwcxd center">
        <div class="top2 center">
            <div class="sub_top fl">
                <input id="selectAll" type="checkbox" value="quanxuan" class="quanxuan"/>全选
            </div>
            <div class="sub_top fl">商品名称</div>
            <div class="sub_top fl">单价</div>
            <div class="sub_top fl">数量</div>
            <div class="sub_top fl">小计</div>
            <div class="sub_top fr">操作</div>
            <div class="clear"></div>
        </div>

        <#list buyerCart as buyerCart>


        <div class="content2 center">
            <div class="sub_content fl ">
                <input id="checkedBox" type="checkbox" class="quanxuan"/>
            </div>
            <div class="sub_content fl"><img style="height: 80px; width: 80px;" src="${buyerCart.productImg}"></div>
            <div class="sub_content fl ft20">${buyerCart.productName}
                &nbsp;&nbsp;&nbsp;&nbsp;<span>${buyerCart.colorName}</span></div>
            <div id="danjia" class="sub_content fl ">${buyerCart.productPrice?c}</div>
            <input id="productPirce" type="hidden" value="${buyerCart.productPrice?c}">
            <input id="productId" type="hidden" value="${buyerCart.productId}">
            <input id="productName" type="hidden" value="${buyerCart.productName}">
            <input id="colorName" type="hidden" value="${buyerCart.colorName}">
            <input id="versionId" type="hidden" value="${buyerCart.versionId}">
            <div class="sub_content fl">
                <input id="add" style="border:1px solid #ccc; border-width: 1px 1px 0 1px; margin-top: 6px; "
                       class="shuliang" type="text" value="+">
                <input id="numValue" style="border:1px solid #ccc; border-width:0 1px;" class="shuliang" type="text"
                       value="${buyerCart.quantity?number}">
                <input id="sub" style="border:1px solid #ccc; border-width: 0 1px 1px 1px;;" class="shuliang"
                       type="text" value="-">
                <a href=""></a>
            </div>
            <div id="xiaoji" style="width: 60px;" class="sub_content fl">${buyerCart.productTotalPrice?c}元</div>
            <div id="delete" class="sub_content fl"><a href="">×</a></div>
            <div class="clear"></div>
        </div>
        </#list>
    </div>
    <div class="jiesuandan mt20 center">
        <div class="tishi fl ml20">
            <ul>
                <li><a href="liebiao.ftl">继续购物</a></li>
                <li>|</li>
                <li>共<span>${buyerCart?size}</span>件商品，已选择<span id="selectCount"></span>件</li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="jiesuan fr">
            <div class="jiesuanjiage fl">合计（不含运费）：<span id="heji">元</span></div>
            <div class="jsanniu fr"><input id="settleAccount" class="jsan" type="submit" name="jiesuan" value="去结算"/>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>

    <div style=" margin-top: 10%;">
        <h2 style="height: 40px;" class="xm-recommend-title">
            <span style=" position: absolute; margin-top: -20px; left: 512px; height: 40px; width: 482px; line-height: 40px; text-align: center; display: block; background-color: #f5f5f5;">为您推荐</span>
        </h2>
    </div>
    <div class="peijian " style="width: 1226px; margin: 0 auto;">

        <div class="main center">
            <div class="content">

                <div class="remen fl" style="margin-bottom: 2%;">
                    <div class="xinpin"><span>新品</span></div>
                    <div class="tu"><a href=""><img src="/image/peijian2.jpg"></a></div>
                    <div class="miaoshu"><a href="">小米6 硅胶保护套</a></div>
                    <div class="jiage">49元</div>
                    <div class="pingjia">372人评价</div>
                    <div class="piao" style="width: 204px;">
                        <a href="">
                            <span>发货速度很快！很配小米6！</span>
                            <span>来至于mi狼牙的评价</span>
                        </a>
                    </div>
                </div>





                <div class="clear"></div>
            </div>
        </div>
    </div>


</div>
<script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
<script type="application/javascript">

    $(document).ready(function () {
        // 页面记录总价格
        var totalPrice = 0;
        // 页面记录选中数
        var selectCount = 0;
        // 点击每次添加一个商品 并计算总价格
        $("#tops").on('click', '#add', function () {
            // 取出旧的值
            var oldCount = $(this).next('#numValue').val();
            // 每次加一
            var newCount = parseInt(oldCount) + 1
            // 重新赋值
            $(this).next('#numValue').val(newCount);
            // 取出单价的值
            var productPirce = $(this).parent().prevAll("#productPirce").val()
            // 产品id
            var productId = $(this).parent().prevAll("#productId").val();
            // 产品名称
            var productName = $(this).parent().prevAll("#productName").val();
            // 产品颜色
            var colorName = $(this).parent().prevAll("#colorName").val();
            // 版本id
            var versionId = $(this).parent().prev("#versionId").val();
            $.ajax({
                url: 'http://localhost:8080/cart/addItem?secondCategoryId=' + productId +
                '&productPrice=' + productPirce + '&versionId=' + versionId + '&colorName=' + colorName + '&productName=' + productName + '&quantity=1',
                success: function (result) {
                    window.location.reload();
                }
            })
        })

        //点击每次减少一件商品 并计算价格
        $("#tops").on('click', '#sub', function () {
            var oldCount = $(this).prev('#numValue').val();
            // 数量小于1 再点击就没有效果了
            if (oldCount <= 1) {
                return false;
            }
            // 取出旧的值
            var oldCount = $(this).next('#numValue').val();
            // 每次加一
            var newCount = parseInt(oldCount) + 1
            // 重新赋值
            $(this).next('#numValue').val(newCount);
            // 取出单价的值
            var productPirce = $(this).parent().prevAll("#productPirce").val()
            // 产品id
            var productId = $(this).parent().prevAll("#productId").val();
            // 产品名称
            var productName = $(this).parent().prevAll("#productName").val();
            // 产品颜色
            var colorName = $(this).parent().prevAll("#colorName").val();
            // 版本id
            var versionId = $(this).parent().prev("#versionId").val();
            $.ajax({
                url: 'http://localhost:8080/cart/addItem?secondCategoryId=' + productId +
                '&productPrice=' + productPirce + '&versionId=' + versionId + '&colorName=' + colorName + '&productName=' + productName + '&quantity=-1',
                success: function (result) {
                    window.location.reload();
                }
            })
        });

        // 从购物车中删除
        $("#tops").on('click', '#delete', function () {

            // 取出单价的值
            var productPirce = $(this).prevAll("#productPirce").val();
            // 产品id
            var productId = $(this).prevAll("#productId").val();
            // 产品名称
            var productName = $(this).prevAll("#productName").val();
            // 产品颜色
            var colorName = $(this).prevAll("#colorName").val();
            // 版本id
            var versionId = $(this).prevAll("#versionId").val();
            $.ajax({
                url: 'http://localhost:8080/cart/deleteItem?productId=' + productId + '&productName=' + productName + '&productPrice=' + productPirce + '&versionId=' + versionId + '&colorName=' + colorName,
                success: function (result) {
                    window.location.reload();
                }
            })


        })

        // 选中商品
        $("#tops").on('click', '#checkedBox', function () {
            // alert("点击了");
            // 取出单价的值
            var productPirce = $(this).parent().nextAll("#productPirce").val();
            // 取出单个商品总价格
            var singProductPrice = $(this).parent().nextAll("#xiaoji").html();
            // 产品id
            var productId = $(this).parent().nextAll("#productId").val();
            // alert(productId)
            // 产品名称
            var productName = $(this).parent().nextAll("#productName").val();
            // alert(productName)
            // 产品颜色
            var colorName = $(this).parent().nextAll("#colorName").val();
            // alert(colorName)
            // 版本id
            var versionId = $(this).parent().nextAll("#versionId").val();
            if ($(this).is(':checked')) {
                // 发送请求更改MySQL数据库checked状态
                $.ajax({
                    url: 'http://localhost:8080/cart/editChecked?productId=' + productId +
                    '&productName=' + productName + '&productPrice=' + productPirce +
                    '&versionId=' + versionId + '&colorName=' + colorName + '&checked=1',
                    success: function (reustl) {
                        totalPrice = parseInt(totalPrice) + parseInt(singProductPrice);
                        selectCount = selectCount + 1
                        $("#selectCount").html(selectCount);
                        $("#heji").html(totalPrice + '元');
                    }
                })
            } else {
                $.ajax({
                    url: 'http://localhost:8080/cart/editChecked?productId=' + productId +
                    '&productName=' + productName + '&productPrice=' + productPirce +
                    '&versionId=' + versionId + '&colorName=' + colorName + '&checked=0',
                    success: function (result) {
                        totalPrice = parseInt(totalPrice) - parseInt(singProductPrice);
                        selectCount = selectCount - 1
                        $("#selectCount").html(selectCount);
                        $("#heji").html(totalPrice + '元');
                    }
                })
            }
        })

        // 手动修改购物车数量
        $("#tops").on('blur', '#numValue', function () {
            // 取出单价的值
            var productPirce = $(this).parent().prevAll("#productPirce").val();
            // alert(productPirce)
            // 产品id
            var productId = $(this).parent().prevAll("#productId").val();
            // alert(productId)
            // 产品名称
            var productName = $(this).parent().prevAll("#productName").val();
            // alert(productName)
            // 产品颜色
            var colorName = $(this).parent().prevAll("#colorName").val();
            // alert(colorName)
            // 版本id
            var versionId = $(this).parent().prevAll("#versionId").val();
            // alert(versionId)
            // 获取修改的数量
            var count = $(this).val();
            if (parseInt(count) && count > 0) {
                $.ajax({
                    url: 'http://localhost:8080/cart/editCartNumber?productId=' + productId + '&productPrice=' + productPirce + '&versionId=' + versionId + '&colorName=' + colorName + '&productName=' + productName + '&quantity=' + count,
                    success: function (result) {
                        window.location.reload();
                    }
                })
            } else {
                alert("请输入合法的数字");
                $(this).val(1);
                return false;
            }

        })

        // 全选，全不选
        // $("#selectAll").on('click', function(){
        //     $(this).nextAll("#checkedBox").attr('checked',true);
        //
        // })

        //立即结算
        $("#settleAccount").click(function () {
            if (selectCount < 1) {
                alert("请至少选择一件商品");
                return false;
            }
            window.location.href ='/order/confirmOrder';
        })


    });

</script>

<!-- footer -->
<@common.footer/>

</body>
</html>
